// Redux的三大核心概念呢：action reducer store
import { createStore } from "redux";
// 1. 核心 action
// 定义：JS对象，描述一个动作（功能），type表示动作类型，约定payload是额外数据，配合动作完成功能。

// 描述：添加任务
// const action = { type: "addTodo", payload: "吃饭" };
// 描述：删除任务
// const action = { type: 'delTodo', payload: 1 }

// 2. action creator  action创建
// 定义：通过一个函数创建action，避免重复创建相同功能的action

// 删除任务，不使用 Action Creator
// const action1 = { type: 'delTodo', payload: 1 } // 删除ID为1的任务
// const action2 = { type: 'delTodo', payload: 2 } // 删除ID为2的任务

// 删除任务，使用 Action Creator
// const delTodoAction = (payload) => {
//   return { type: "delTodo", payload };
// };

// console.log(delTodoAction(1))
// console.log(delTodoAction(2))

export const increment = (payload) => {
  return { type: "increment", payload };
};
export const decrement = (payload) => {
  return { type: "decrement", payload };
};

// 3. 核心 reducer
// 定义：是一个函数，(prevState,action) => newState 这样一个函数
// 作用：根据上一次状态，传入的action，去处理动作得到一个新的状态，一定需要返回状态

const reducer = (state = 10, action) => {
  // console.log('reducer：', state, action)
  // 需要去判断action类型然后去干活（产生新值）
  switch (action.type) {
    case "increment":
      // 一定是新值，不能修改state
      return state + action.payload;
    case "decrement":
      return state - action.payload;
    default:
      // 如果未匹配的action类型，把状态默认返回
      return state;
  }

  // 也可以通过 if else 去判断action类型
};

// 模拟调用 reducer
// reducer(0, {type:'increment',payload:8})
// console.log(reducer(0, increment(8)));
// // reducer(8, {type:'decrement',payload:5})
// console.log(reducer(8, decrement(5)));
// // 没有action类型
// console.log(reducer(3, { type: "delTodo" }));

// 3. 核心 store
// 定义：状态仓库，整合 action 和 reducer
// 3.1 安装导入  npm i redux   import { createStore } from 'redux'
// 3.2 创建仓库
// const store = createStore(reducer);
// // 3.3 获取仓库数据 (创建仓库的时候，reducer的state的默认值就是仓库的初试状态)
// console.log("初始状态：", store.getState());

// // 3.5 可以创建订阅，监听状态的改变
// const unSubscribe =  store.subscribe(()=>{
//   console.log("最新状态：", store.getState());
// })

// // 3.4 分发一个action，给reducer去干活
// store.dispatch(increment(10));
// // console.log("最新状态：", store.getState());
// store.dispatch(decrement(8))
// // console.log("最新状态：", store.getState());

// // 取消监听
// unSubscribe()
// store.dispatch(decrement(8))  // -6


// 4. store 的默认状态的由来
const store = createStore(reducer)
// 4.1 初始化的时候就会调用一次reducer，这一次调用没有上一次的state，会使用函数的默认值
// 4.2 发现 第一次的action {type: '@@redux/INITl.7.z.w.l.6'} 自会走default, 把默认值返回出去
// console.log("初始状态：", store.getState());
// 以后仓库设置初始值，state = initialState 初始化值

// 5. store dispatch之后redux执行过程
// 现在初始状态是 10 
// store.dispatch(increment(10))
// 把上一次的状态 10 和action  { type: 'increment', payload: 10 } 传给reducer
// reducer执行逻辑，处理完action后，把新的状态返回出去，
// store 会来接管这个新的状态，把原来就的状态替换掉
// console.log("最新状态：", store.getState());
export default store
